---
title: Using Angular
description: Easily use Panda with Angular with our dedicated integration.
---

This guide shows you how to set up Panda CSS in an Angular project using PostCSS.

## Start a new project

<Steps>

### Create Vite project

To get started, we will need to create a new Angular project using the official
[scaffolding tool](https://angular.dev/tools/cli).

If you don't enter any parameter, the CLI will guide you through the process of creating a new Angular app.

```bash
ng new test-app
```

You will be asked a few questions, answer them as follows:

```bash
? Which stylesheet format would you like to use? CSS
? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No
```

### Install Panda

Install panda and create your `panda.config.ts` file.

<Tabs items={['pnpm', 'npm', 'yarn', 'bun']}>
  {/* <!-- prettier-ignore-start --> */}
  <Tab>
    ```bash
    pnpm install -D @pandacss/dev
    pnpm panda init
    ```
  </Tab>
  <Tab>
    ```bash
    npm install -D @pandacss/dev
    npx panda init
    ```
  </Tab>
  <Tab>
    ```bash
    yarn add -D @pandacss/dev
    yarn panda init
    ```
  </Tab>
  <Tab>
    ```bash
    bun add -D @pandacss/dev
    bun panda init
    ```
  </Tab>
  {/* <!-- prettier-ignore-end --> */}
</Tabs>

### Configure PostCSS

Create a `postcss.config.json` file in the root of your project and add the following code:

```json filename="postcss.config.json"
{
  "plugins": {
    "@pandacss/dev/postcss": {}
  }
}
```

> You must use a JSON file for the PostCSS configuration, as the Angular CLI does not support JavaScript PostCSS
> configuration files.

### Update package.json scripts

Open your `package.json` file and update the `scripts` section as follows:

```diff {3} filename="package.json"
{
  "scripts": {
+    "prepare": "panda codegen",
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
  }
}
```

- `"prepare"` - script that will run Panda CSS CLI codegen before each build. Read more about
  [codegen](/docs/references/cli#panda-codegen) in the CLI section.

> This step ensures that the panda output directory is regenerated after each dependency installation. So you can add
> the output directory to your `.gitignore` file and not worry about it.

### Configure the content

Make sure that all of the paths of your Angular components are included in the `include` section of the
`panda.config.ts` file.

```js {8,17} filename="panda.config.ts"
import { defineConfig } from '@pandacss/dev'

export default defineConfig({
  // Whether to use css reset
  preflight: true,

  // Where to look for your css declarations
  include: ['./src/**/*.{js,jsx,ts,tsx}'],

  // Files to exclude
  exclude: [],

  // The output directory for your css system
  outdir: 'styled-system'
})
```

### Configure the entry CSS with layers

Add this code to an `src/index.css` file and import it in the root component of your project.

```css filename="src/index.css"
@layer reset, base, tokens, recipes, utilities;
```

## Start your build process

Run the following command to start your development server.

<Tabs items={['pnpm', 'npm', 'yarn', 'bun']}>
  {/* <!-- prettier-ignore-start --> */}
  <Tab>
    ```bash
    pnpm dev
    ```
  </Tab>
  <Tab>
    ```bash
    npm run dev
    ```
  </Tab>
  <Tab>
    ```bash
    yarn dev
    ```
  </Tab>
  <Tab>
    ```bash
    bun dev
    ```
  </Tab>
  {/* <!-- prettier-ignore-end --> */}
</Tabs>

### Start using Panda

Now you can start using Panda CSS in your project. Here is the snippet of code that you can use in your
`src/app.component.ts` file.

```typescript filename="src/app.component.ts"
import { Component } from '@angular/core'
import { css } from '../styled-system/css'

@Component({
  selector: 'app-root',
  standalone: true,
  template: ` <div [class]="redBg"></div> `
})
export class App {
  redBg = css({ bg: 'red.400' })
}
```

</Steps>
